<script setup name="header">
import { ref } from 'vue'
import { MoreOne } from '@icon-park/vue-next'
import IconPark from '@/components/common/IconPark.vue'

const proos = defineProps({
  title: {
    type: String,
    default: '歌单'
  },
  defaultStr: {
    type: String,
    default: '歌单'
  },
  showMore: {
    type: Boolean,
    default: true
  },
  scrollTopNum: {
    type: Number,
    default: 30
  },
  showTitle: {
    type: Boolean,
    default: true
  }
})

const isShow = ref(false)

const handleScroll = event => event.scrollTop >= proos.scrollTopNum ? isShow.value = true : isShow.value = false
</script>

<template>
  <van-sticky :offset-top="0" @scroll="handleScroll">
    <van-nav-bar class="header" left-arrow @click-left="$router.back()">
      <template #title>
        <div v-if="showTitle" class="header-title van-ellipsis">{{ isShow ? title : defaultStr }}</div>
        <slot v-else name="title" />
      </template>
      <template #right>
        <slot name="right" />
        <IconPark v-if="showMore" :icon="MoreOne" :strokeWidth="2" :size="6" />
      </template>
    </van-nav-bar>
  </van-sticky>
  <slot name="content" />
</template>

<style scoped lang="scss">
.header {
  background-color: var(--color-background);
  color: var(--reversal-text);

  &-title {
    font-size: 14px;
    transition: all .3s;
  }

  :deep(.van-icon),
  :deep(.van-nav-bar__title) {
    color: var(--reversal-text);
  }

  :deep(.van-nav-bar__right) {
    padding-right: 10px;
    line-height: 1;
  }
}

.van-hairline--bottom:after {
  content: none;
}
</style>